<template>
	<view>
		<view class="cu-list menu">
			<view class="cu-item ">
				<view class="cu-avatar radius lg" style="background-image:url(../../static/logo.png);"></view>
				<view class="content padding-tb padding-left-sm">
					<view class="text-pink">
						<text class="text-cut">请在2019-10-15 15:35:40前完成支付！</text>
					</view>
					<view class="text-gray text-sm flex">
						<text class="text-cut">2019-10-15 15:35:54</text>
					</view>
				</view>
			</view>

			<view class="bg-white padding">
				<view class="cu-steps">
					<view class="cu-item" :class="index>num?'':'text-red'" v-for="(item,index) in numList" :key="index">
						<text class="num" :class="index==2?'err':''" :data-index="index + 1"></text> {{item.name}}
					</view>
				</view>
			</view>

			<view class="cu-item margin-top-sm">
				<view class="content padding-tb-sm">
					<view class="">
						地址+手机号码
					</view>
					<view class="text-gray">
						地址+手机号码地址+手机号码
					</view>
				</view>
			</view>
			<view class="cu-item margin-top-sm">
				<view class="action">
					<view class="">
						共1件商品
					</view>
				</view>
			</view>

			<view class="cu-item" v-for="(item,index) in 1" :key="index">
				<view class="flex padding-tb">
					<image class="item-image" :src="logo" mode="aspectFill"></image>
					<view class="flex flex-direction justify-between padding-left">
						<view class="text-lg flex justify-between align-center">
							<text class="text-cut" style="width: 450upx;">提交订单提交订单</text>
							<text class="text-gray text-sm padding-left">x3</text></view>
						<text class="text-price text-red">230</text>
					</view>
				</view>
			</view>

			<view class="padding bg-white margin-top-sm">
				<view class="flex justify-between align-center padding-tb-xs" v-for="(item,index) in 5" :key="index">
					<view class="title">订单编号：</view>
					<view class="text-gray">订单编号</view>
				</view>
			</view>

			<view class="cu-item margin-top-sm">
				<view class="content">
					支付金额
				</view>
				<view class="action">
					<text class="text-price text-gray">599</text>
				</view>
			</view>

			<view class="cu-tabbar-height"></view>

			<view class="cu-bar bg-white tabbar border shop foot flex justify-between">
				<view class="padding-left">
					<text class="text-lg">实付款：</text>
					<text class="text-price text-red text-xl">10086</text></view>
				<view class="padding-right">
					<button class="cu-btn bg-red round shadow-blur">立即结算</button>
				</view>
			</view>
		</view>
		
		<zhi-authorize></zhi-authorize>
	</view>
</template>

<script>
	const app = getApp()
	import util from '@/common/util.js'
	import zhiAuthorize from '@/components/zhi-authorize/zhi-authorize.vue'
	export default {
		components: {
			zhiAuthorize
		},
		data() {
			return {
				logo: this.$api.logo,
				numList: [{
					name: '待付款'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}, {
					name: '已完成'
				}, ],
				num: 0,
				scroll: 0,
				orderId: 0,
				cartInfo: [],
				orderInfo: [],
			}
		},
		onLoad:function(options){
			if (!options.order_id) return util.Toast({ title: '参数错误' })
			this.orderId = options.order_id
		},
		onShow:function(){
			if (app.globalData.isLogin) {
				this.getOrderInfo()
			}
		},
		methods: {
			/* 订单详情 */
			async getOrderInfo() {
				uni.showLoading({ title: '正在加载中' })
				try{
					let res = this.$api.orderView(this.orderId)
					this.orderInfo = res.data.orderInfo
					this.cartInfo = res.data.cartInfo
					uni.hideLoading()
				}catch(err){
					uni.hideLoading()
					util.Toast({ title: err.msg })
				}
			},
			/* 确认收货 */
			async receiptOrder() {
				uni.showModal({
					title: '确认收货',
					content: '为保障权益,请收到货确认无误后,再确认收货',
					success:function(res){
						if (res.confirm) {
							try{
								let res = this.$api.orderReceipt(this.orderId)
								util.Toast({ title: '操作成功', icon: 'success' }, function() {
									this.getOrderInfo()	
								})
							}catch(err){
								return util.Toast({ title: err.msg })
							}
						}
					}
				})
			},
			/* 删除订单 */
			async deleteOrder() {
				try{
					let res = this.$api.orderDelete(this.orderId)
				}catch(err){
					util.Toast({ title: err.msg })
				}
			},
			/* 再次购买 */
			async buyGoodsAgain() {
				try{
					let res = this.$api.orderAgain(this.orderInfo.order_id)
					uni.navigateTo({
						url: '/pages/order/create?cart_id=' + res.data.cart_id
					})
				}catch(e){
					util.Toast({ title: e.msg })
				}
			},
			/* 复制订单号 */
			copy:function(){
				uni.setClipboardData({
					data: this.orderInfo.order_id
				})
			},
			/* 拨打电话 */
			callPhone:function(){
				uni.makePhoneCall({
					phoneNumber: this.orderInfo.delivery_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.item-image {
		width: 130upx;
		height: 130upx;
	}
</style>
